/* Copyright 2020 The TensorFlow Authors. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/
@use '@angular/material' as mat;
@use '@angular/material' as matm2;
@use '@angular/material' as matm2var;
@import 'tensorboard/webapp/theme/tb_theme';
@import '../common';

$_title-to-heading-gap: 12px;

$_card_padding_top: $metrics-preferred-gap - $_title-to-heading-gap;

// If this is changed, please also update canExpandTable
$_data_table_initial_height: 100px;

:host {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
  padding: $metrics-preferred-gap;
  // When vertically centered, the title's text-top contains extra space above
  // the text, which counts towards the visually perceived white space.
  padding-top: $_card_padding_top;

  &:has(.expand-button) {
    // Remove the bottom padding when the expand button appears
    padding: $_card_padding_top $metrics-preferred-gap 0;
  }
}

.always-visible {
  display: flex;
  flex-direction: column;

  &:not(:has(.expand-button)) {
    flex-grow: 1;
  }

  // The content that is always visible should match the min height of a card,
  // taking into account padding and 2px for the card border.
  flex-basis: $metrics-min-card-height - 2px - ($metrics-preferred-gap * 2) +
    $_title-to-heading-gap;
}

.heading {
  $heading-content-gap: 4px;

  align-items: center;
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  margin-bottom: $heading-content-gap;
  position: relative;

  .name {
    align-items: center;
    display: grid;
    gap: 5px;
    grid-template-columns: auto auto;
  }

  vis-selected-time-clipped {
    font-size: 1.2em;
    line-height: 0;
  }
}

.tag {
  overflow: hidden;
}

.controls {
  @include metrics-card-controls;
  flex-shrink: 0;
  // TODO(psybuzz) do not use negative margin.
  margin-right: -1 * $_title-to-heading-gap;
}

.chart-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
  resize: vertical;

  mat-spinner {
    $mat-icon-button-diameter: 40px;
    $spinner-diameter: 18px;
    $spinner-to-container-edge: ($mat-icon-button-diameter - $spinner-diameter) *
      0.5;

    // Position horizontally to be centered with the 'more options' button.
    // Position vertically to be equidistant to the chart's top/right edges.
    position: absolute;
    right: $spinner-to-container-edge;
    top: $spinner-to-container-edge;
  }

  line-chart {
    flex-grow: 1;
  }
}

.tooltip {
  border-spacing: 4px;
  font-size: 13px;

  th {
    text-align: left;
  }

  $_circle-size: 12px;

  .tooltip-row {
    white-space: nowrap;
  }

  .tooltip-row-circle {
    align-items: center;
    display: inline-flex;
    height: $_circle-size;
    width: $_circle-size;
  }

  .tooltip-row-circle > span {
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    display: inline-block;
    // Subtract by border width (1px on both sides)
    height: $_circle-size - 2px;
    width: $_circle-size - 2px;
  }

  .closest .tooltip-row-circle > span {
    border-color: #fff;
    box-shadow: inset 0 0 0 1px #fff;
  }
}

.out-of-selected-time {
  height: 100%;
  position: absolute;

  $_border-width: 2px;

  &.start {
    border-right-width: $_border-width;
    margin-left: -0.5 * $_border-width;

    &.range {
      left: 0;
    }
  }

  &.end {
    border-left-width: $_border-width;
    margin-right: -0.5 * $_border-width;
    right: 0;
  }

  &.range {
    // Replace this with backdrop-filter if opacity works.
    background-color: rgba(255, 255, 255, 0.5);

    @include tb-dark-theme {
      background-color: rgba(0, 0, 0, 0.4);
    }
  }
}

.data-table-container {
  height: $_data_table_initial_height;
  min-height: $_data_table_initial_height;
  max-height: 50em;
  overflow: auto;
  resize: vertical;

  &.expanded {
    height: auto;
  }
}

.bottom-area {
  display: flex;
  flex-direction: column;
  align-items: center;

  .expand-button {
    color: matm2.get-color-from-palette($tb-foreground, secondary-text);

    @include tb-dark-theme {
      color: matm2.get-color-from-palette($tb-dark-foreground, secondary-text);
      background-color: map-get($tb-dark-background, background);
    }
  }
}
